<template>
    <div class="not-found" data-v-8f33f6cb>
        404
        <hr data-v-8f33f6cb>    
        <TitleHeader data-v-8f33f6cb class="demo"></TitleHeader>
    </div>
</template>

<script setup lang="ts">
    import TitleHeader from '@/components/TitleHeader.vue';
    defineOptions({
        name:"NotFoundView",
    })
</script>

<style lang="scss" scoped>
    /* 
    
        默认情况下,脚手架解析style_scoped过程中,会在每个选择器的尾部添加唯一id作为属性 => 样式只对当前页面生效
         缺点: 无法修改组件内元素的样式
    */

    //  .demo h2{   //  .demo h2 [data-v-8f33f6cb] => h2元素要求有[data-v-8f33f6cb]属性
    //         color: red!important;
    // }

    // 如何解决?
    // 深度选择器 => 

    // [data-v-8f33f6cb] .demo h2  => 有[data-v-8f33f6cb]属性的元素(父代)下的 .demo 的 h2 => 此时修饰的元素是父级元素中的某个
    // .demo[data-v-8f33f6cb]  h2  => 有[data-v-8f33f6cb]属性的元素.demo 的 h2 

    // 如何使用深度选择器
    // 普通css     >>>
    // scss        ::v-deep (v2)
    // less        /deep/

    // Vue2
   
    // ::v-deep .demo h2{   
    //         color: red!important;
    // }
    // .demo ::v-deep h2{   //  .demo h2 [data-v-8f33f6cb] => h2元素要求有[data-v-8f33f6cb]属性
    //         color: red!important;
    // }

    // Vue3
    // :deep(.demo h2){
    //     color: red!important;
    // }

    // .demo :deep(h2){
    //     color: red!important;
    // }

</style>

<style lang="less" scoped>
    // /deep/ .demo h2{     
    //         color: red!important;
    // }

    .demo /deep/ h2{     
            color: red!important;
    }
</style>

<style scoped>

    /* 放最前面=> 包含  [data-v-8f33f6cb] .demo h2 */
    /* >>> .demo h2{     
            color: red!important;
    } */

    /* 放在选择器中间拼接 */
    /* .demo[data-v-8f33f6cb] h2  */
    /*  .demo >>> h2{     
            color: red!important;
    } */
</style>